<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艺术家-首页</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrap">
        <header id="header">
            <!-- logo -->
            <div class="logo"><img src="./images/logo.png" alt=""></div>

            <!-- 注册登录 -->
            <div class="signIn">
                <button>注册</button>
                <button>登录</button>
            </div>
        </header>
        <main>

            <!-- 大背景 banner 区域 -->
            <div class="bannerBox">
                <!-- 粘性导航栏 -->
                <div class="navfix">
                    <div class="searchBox">
                        <input type="text" placeholder="搜索">
                        <i class="iconfont icon-sousuo"></i>
                    </div>
                    <div class="navMenu">
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="Artwork.html">艺术品</a></li>
                            <li><a href="Artist.html">艺术家</a></li>
                            <li><a href="Show.html">展览</a></li>
                            <li><a href="Article.html">文章</a></li>
                        </ul>
                    </div>
                </div>

                <!-- banner信息 -->
                <div class="bannerInfo">
                    <h2>艺术与生活的融合</h2>
                    <p>著名艺术家集合 </p>
                    <span class="bannerEn">PERSISTING IN YOUR DREAM WILL BRINGYOU FRUITFUL RESULTS</span>
                    <div class="dateBox">
                        <div class="Square"><span>3</span>月25日
                            <div class="tangle1"></div>
                        </div>
                        <div class="Square">展览节
                            <div class="tangle2"></div>
                        </div>
                        <div class="Square">震撼发布
                            <div class="tangle3"></div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 灰色居中区域 -->
            <div class="greyCont">

                <!-- 艺术品 区域 -->
                <div class="artwork">
                    <!-- 艺术品 顶部标题 -->
                    <div class="artworkTop">
                        <h3>艺术品</h3>
                        <div class="moreBox">
                            <a href="Artwork.html">查看更多</a>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>

                    </div>
                    <!-- 艺术品 图片item -->
                    <div class="aetworkItems">
                        <!-- 第一行 -->
                        <div class="row-one">
                            <!-- 第一行左边 大图片 -->
                            <div class="item-left">
                                <div class="imgBox"><img src="./images/indexImg/artwork1.png" alt=""></div>
                                <div class="item-info">
                                    <p>梵高《星月夜》</p>
                                    <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                </div>
                            </div>

                            <!-- 第二行右边 四个小图片 -->
                            <div class="item-right">
                                <!-- 第一行右边 第一行 -->
                                <div class="row-one-one">
                                    <div class="item">
                                        <div class="imgBox"><img src="./images/indexImg/artwork2.png" alt=""></div>
                                        <div class="item-info">
                                            <p>塞尚《圣维克多山》</p>
                                            <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="imgBox"><img src="./images/indexImg/artwork3.png" alt=""></div>
                                        <div class="item-info">
                                            <p>塞尚《圣维克多山》</p>
                                            <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                        </div>
                                    </div>

                                </div>
                                <!-- 第一行右边 第二行 -->
                                <div class="row-one-two">
                                    <div class="item">
                                        <div class="imgBox"><img src="./images/indexImg/artwork4.png" alt=""></div>
                                        <div class="item-info">
                                            <p>莫奈《日出印象》</p>
                                            <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="imgBox"><img src="./images/indexImg/artwork5.png" alt=""></div>
                                        <div class="item-info">
                                            <p>塞尚《圣维克多山》</p>
                                            <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 第二行 三个横排图片 -->
                        <div class="row-two">
                            <div class="item">
                                <div class="imgBox"><img src="./images/indexImg/artwork2-1.png" alt=""></div>
                                <div class="info">
                                    <p>皮诺·德埃尼《人体画系列》</p>
                                    <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="imgBox"><img src="./images/indexImg/artwork2-2.png" alt=""></div>
                                <div class="info">
                                    <p>莫奈《《蒙托尔热街的节日》》</p>
                                    <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="imgBox"><img src="./images/indexImg/artwork2-3.png" alt=""></div>
                                <div class="info">
                                    <p>莫奈《《睡莲》》</p>
                                    <p><span class="redNum">21</span> 点赞 / <span class="redNum">3</span>评论 / <span class="redNum">306</span> 收藏</p>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <!-- 艺术家 区域 -->
                <div class="artist">
                    <!-- 艺术家 顶部标题 -->
                    <div class="artistTop">
                        <h3>艺术家</h3>
                        <div class="moreBox">
                            <a href="Artist.html">查看更多</a>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>

                    </div>
                    <!-- 艺术家 第一行 -->
                    <div class="row-one">
                        <div class="borBox"></div>
                        <div class="imgBox">
                            <img src="./images/indexImg/artist1.png" alt="">
                            <div class="art-info">
                                <p>皮诺·德埃尼</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>
                        <div class="whiteBox">百名画家集结于此，让我们时刻享受艺术的美。使我们更能便捷的欣赏到艺术,且把艺术融入到我们每个人的生活当中去,感受我们的艺术，也时刻了解我们艺术家创作灵感。</div>

                    </div>
                    <!-- 艺术家 第二行 -->
                    <div class="row-two">
                        <div class="art-item">
                            <img src="./images/indexImg/artist2.png" alt="">
                            <div class="art-info">
                                <p>达利</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>
                        <div class="art-item">
                            <img src="./images/indexImg/artist3.png" alt="">
                            <div class="art-info">
                                <p>蒂斯</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>
                        <div class="art-item">
                            <img src="./images/indexImg/artist4.png" alt="">
                            <div class="art-info">
                                <p>高更</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>

                    </div>
                    <!-- 艺术家 第三行 -->
                    <div class="row-two">
                        <div class="art-item">
                            <img src="./images/indexImg/artist5.png" alt="">
                            <div class="art-info">
                                <p>达芬奇</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>
                        <div class="art-item">
                            <img src="./images/indexImg/artist6.png" alt="">
                            <div class="art-info">
                                <p>皮诺·德埃尼</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>
                        <div class="art-item">
                            <img src="./images/indexImg/artist7.png" alt="">
                            <div class="art-info">
                                <p>蒙克</p>
                                <p>发表过<span class="redNum">122</span> 件艺术品</p>
                                <p>被<span class="redNum">1300</span>位圈内人关注</p>
                            </div>
                            <div class="follow">+关注</div>
                        </div>

                    </div>
                </div>

                <!-- 展览 区域 -->
                <div class="show">
                    <!-- 展览 顶部标题 -->
                    <div class="showTop">
                        <h3>展览</h3>
                        <div class="moreBox">
                            <a href="Show.html">查看更多</a>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>

                    </div>
                    <!-- 展览 上半部分区域 -->
                    <div class="show-one">
                        <div class="show-bj"></div>
                        <p class="show-title-En">OUTSTANDING ART EXHIBITION</p>
                        <h3>艺术展览</h3>
                        <div class="showItems">
                            <!-- 1 -->
                            <div class="show-item">
                                <div class="itemTop">
                                    <span class="sixText">油画展</span>
                                    <div class="sixBox"></div>
                                </div>
                                <p>名家油画展</p>
                                <p>广州中山大道中1034号</p>
                                <span class="dateRed">2019年3月20日</span>
                            </div>
                            <!-- 2 -->
                            <div class="show-item">
                                <div class="itemTop">
                                    <span class="sixText">油画展</span>
                                    <div class="sixBox"></div>
                                </div>
                                <p>名家油画展</p>
                                <p>广州中山大道中1034号</p>
                                <span class="dateRed">2019年3月20日</span>
                            </div>
                            <!-- 3 -->
                            <div class="show-item">
                                <div class="itemTop">
                                    <span class="sixText">油画展</span>
                                    <div class="sixBox"></div>
                                </div>
                                <p>名家油画展</p>
                                <p>广州中山大道中1034号</p>
                                <span class="dateRed">2019年3月20日</span>
                            </div>
                            <!-- 4 -->
                            <div class="show-item">
                                <div class="itemTop">
                                    <span class="sixText">油画展</span>
                                    <div class="sixBox"></div>
                                </div>
                                <p>名家油画展</p>
                                <p>广州中山大道中1034号</p>
                                <span class="dateRed">2019年3月20日</span>
                            </div>

                        </div>
                        <i class="show-left-icon iconfont icon-xiangzuo1"></i>
                        <i class="show-right-icon iconfont icon-xiangyou1"></i>
                    </div>
                    <!-- 展览 下半部分区域 -->
                    <div class="show-two">
                        <p class="show-title-En">OUTSTANDING ART EXHIBITION</p>
                        <h3>水墨展</h3>
                        <div class="showItems">
                            <div class="show-item">
                                <img src="./images/indexImg/ink1.png" alt="">
                                <div class="show-info">
                                    <p>吴冠中</p>
                                    <span>早年营为木工,后以卖画为生,五十七岁后定居北京擅画花鸟虫鱼山水。人物。笔墨雄泽滋润,色彩浓艳明快..</span>
                                </div>
                            </div>
                            <div class="show-item">
                                <img src="./images/indexImg/ink2.png" alt="">
                                <div class="show-info">
                                    <p>齐白石</p>
                                    <span>早年营为木工,后以卖画为生,五十七岁后定居北京擅画花鸟虫鱼山水。人物。笔墨雄泽滋润,色彩浓艳明快..</span>
                                </div>
                            </div>
                            <div class="show-item">
                                <img src="./images/indexImg/ink3.png" alt="">
                                <div class="show-info">
                                    <p>徐悲鸿</p>
                                    <span>早年营为木工,后以卖画为生,五十七岁后定居北京擅画花鸟虫鱼山水。人物。笔墨雄泽滋润,色彩浓艳明快..</span>
                                </div>
                            </div>

                        </div>
                        <i class="show-left-icon iconfont icon-xiangzuo1"></i>
                        <i class="show-right-icon iconfont icon-xiangyou1"></i>
                    </div>
                </div>

                <!-- 文章 区域 -->
                <div class="article">
                    <!-- 展览 顶部标题 -->
                    <div class="articleTop">
                        <h3>文章</h3>
                        <div class="moreBox">
                            <a href="Article.html">查看更多</a>
                            <i class="iconfont icon-xiangyou1"></i>
                        </div>
                    </div>
                    <!-- 文章图片展示 -->
                    <div class="article-row">
                        <div class="article-item">
                            <img src="./images/indexImg/article1.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>
                        <div class="article-item">
                            <img src="./images/indexImg/article2.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>
                        <div class="article-item">
                            <img src="./images/indexImg/article3.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>

                    </div>
                    <div class="article-row">
                        <div class="article-item">
                            <img src="./images/indexImg/article4.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>
                        <div class="article-item">
                            <img src="./images/indexImg/article5.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>
                        <div class="article-item">
                            <img src="./images/indexImg/article6.png" alt="">
                            <div class="item-info">
                                <p>遥思“空灵沙洲”</p>
                                <p>江南人。对沙漠难免陌生。从艺多年来。走过不少地方。高原峡谷。平原丘院。江河湖海、森林草原。西部也去过无数次。独未真正涉足有名号的大沙漠，求知有了些许交浩。时日。文化学者伟光君先行约文。题谈“公共视角的沙读雕塑”，暑慌才进民勤国际沙漠降塑创作营,现也就只能天马行空。任文思驰聘了 <a href="#" class="redRead">[阅读文章】</a></p>
                                <div class="author">徐正玲</div>
                                <div class="likeBox"><i class="iconfont icon-xiai iconLike"></i> 赞一下</div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 向上图标 -->
                <a href="#header" class="icon-up"><i class="iconfont icon-xiangshangzhanhang iconUp"></i></a>
            </div>
        </main>
        <footer>
            <div class="footer-top">
                <ul>
                    <li>客服中心</li>
                    <li>专家顾问</li>
                    <li>法律政策</li>
                    <li>关于我们</li>
                    <li>企业服务</li>
                    <li>中文</li>
                    <li>English</li>
                </ul>
            </div>
            <div class="footer-bottom">
                <p>我们在这:北京市小店区平阳路122号电话:010-12345678</p>
                <p>邮箱:957894748@126.com</p>
                <div class="QR-code">
                    <img src="./images/QRcode.png" alt="">
                    <img src="./images/logo.png" alt="">
                </div>
            </div>
        </footer>
    </div>




</body>

</html>